<template>
    <header>
       <div class="left">
            <el-input v-model="userList.account" style="width: 180px" placeholder="请输入账号" class="account"/>
            <el-input v-model="userList.tel" style="width: 180px" placeholder="请输入账号手机号" class="tel"/>
            <el-icon @click="search"><Search /></el-icon>
        </div>
       <div>
        <el-button type="primary" @click="router.push('/adminIndex/addadmin')">+添加</el-button>
       </div>
    </header>
    <el-row id="content">
        <el-table :data="adminList" style="width: 100%;" >
            <el-table-column label="头像" width="180">
                <template #default="scope">
                    <img :src="imgsBaseUrl+scope.row.icon" alt="">
                </template>
            </el-table-column>

            <el-table-column label="用户名" prop="adminName" width="220"/>
            <el-table-column label="账号"   prop="account"/>
            <el-table-column label="管理员" :formatter="admin">
                <template #header>
                   <select @change="searchAdminBusiness()" v-model="adminBusiness">
                        <option value="2">全部</option>
                        <option value="0">管理员</option>
                        <option value="1">商家</option>
                   </select>
                </template>
            </el-table-column>
            <el-table-column label="性别" :formatter="sex" />
            <el-table-column label="手机号" prop="tel" />
            <el-table-column label="操作">
                <template #default="scoped">
                    <el-button size="small" type="info" @click="router.push(`/adminIndex/addadmin?adminId=${JSON.stringify(scoped.row.adminId)}`)">修改</el-button>
                    <el-button size="small" type="danger" @click="del(scoped.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row id="footer">
        <!-- 分页 -->
      <el-pagination 
            background 
            layout="prev,pager,next" 
            :page-count=pageCount
            :page-size=pageSize
            @current-change="pageChange"
        ></el-pagination>
    </el-row>
</template>

<script setup>
    import { onMounted, reactive, ref } from 'vue';
    import {Admin,SearchAdmin,AdminBusiness,DeleteAdmin} from "@/api";
    import { ElMessage } from 'element-plus';
    import { useRouter } from 'vue-router';
    import {imgBaseUrl} from "../utlis/RequestPage.js";
    let router = useRouter();
    let imgsBaseUrl = imgBaseUrl;
    let userList = reactive({
        account:"",
        tel:""
    }) 
    
    let pageIndex = ref(1);//当前页数
    let pageSize = ref(4);//每页显示的条数
    let pageCount = ref(0);//总页数
    let pageFlag = ref(0);//分页渲染目标
    // 判断当前页面显示是否是管理员
    // 
    const adminBusiness= ref("2");
    const admin = (row)=>{
        // 返回本行数据
        // console.log("是否是管理员",row);
        if(row.identity == "0"){
            return "管理员"
        }else{
            return "商家"
        }
    }
    // 判断当前男女
    // 
    const sex = (row)=>{
        if(row.sex == "0"){
            return "男"
        }else{
            return "女"
        }
    }
    // 调管理员列表接口
    // 
    const adminList = ref([]);
    let adminlists = async()=>{
        // 传参
        let data = {
            pageIndex:pageIndex.value,
            pageSize:pageSize.value
        }
        let res =await Admin(data);
        console.log("管理员列表接口",res);
        adminList.value = res.adminList;
        pageCount.value = res.pageCount;
    }
    // 管理员列表搜索
    // 
    const search =async ()=>{
        console.log(111);
        let data = {
            pageIndex:pageIndex.value,
            pageSize:pageSize.value,
            account:userList.account,
            tel : userList.tel
        };
        let res =await SearchAdmin(data);
        // console.log("管理员搜索",res);
        adminList.value =res.adminList;
        pageCount.value = res.pageCount;
        return  pageFlag.value
    }
    // 按照身份搜索
    const searchAdminBusiness = async ()=>{
        console.log("管理元的值",adminBusiness.value);
        let data = {
            pageIndex:pageIndex.value,
            pageSize:pageSize.value,
            identity:adminBusiness.value
        };
        let res = await AdminBusiness(data);
        console.log("按照身份搜索",res);
        adminList.value = res.adminList;
        pageCount.value = res.pageCount;
        return  pageFlag.value=1
    }
    // 删除
    // 
    const del =async (item)=>{
        console.log("删除",item);
        let res = await DeleteAdmin({adminId:item.adminId,delFlag:"1"});
        ElMessage.success("删除成功");
        adminlists();
    }

  
    // 分页改变
    // 
    const pageChange = async(pageItem)=>{
        pageIndex.value = pageItem;
        // 渲染搜索
       
        if(pageFlag.value == 1){
            await searchAdminBusiness()
        }else{
            await search();
        }
    }
    onMounted(()=>{
        // 页面加载时调用列表
        adminlists()
    })
</script>

<style lang="less" scoped>
    header{
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            :deep(.el-input__wrapper.is-focus){
                box-shadow: 0px 0px 0px 1px #ccc ;
            }
            .el-icon{
                width:10%;
                height: 15%;
                background-color: aquamarine;
                color: #8a8686;
                font-weight: 700;
                border-radius: 10px;
                svg {
                    height: 2em;
                    width: 1em;
                }
            }
        }
    }
    :deep(.el-table .cell) {
        text-align: center;
    }
    #footer{
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
    img{
        width:60px;
        height:60px;
        border-radius: 50%;
    }
</style>